<template>
  <div>
    <h4>
      {{ count }}
    </h4>
    <h4>
      {{ priceCount }}
    </h4>

    <button @click="add">+1</button>
  </div>

  <div>
    <h4>
      {{ num }}
    </h4>

    <button @click="addNum">+1</button>
  </div>

  <div>
    <h4>
      {{ obj.name }}
    </h4>

    <button @click="changeName">改名</button>
  </div>
</template>

<script>
import { onMounted, computed, ref, watch, watchEffect, reactive } from 'vue'
import axios from 'axios'
export default {
  setup() {
    const obj = reactive({
      name: "张三"
    })
    const changeName = () => {
        obj.name = "李四"
    }


    const count = ref(1000)
    const priceCount = computed(() => {
        return '$' + count.value + '.00'
    })
    const add = () => {
        count.value += 1
    }

    const num = ref(200)
    const addNum = () => {
        num.value += 1
    }

    watch([count, num, obj], (newValue) => {
      // console.log(newValue)
    })


    watchEffect(() => {
      console.log(num.value)
    })


    return {
      count,
      priceCount,
      add,
      num,
      addNum,
      obj,
      changeName
    }
    // console.log(this)
    // onMounted(() => {
    //   console.log('vue生命周期')
    // })
  }
}
</script>

<style>

</style>